<template>
  <div>
    <el-button icon="el-icon-plus" class="button-new-tag" size="small" @click="open()" v-if="!disabled">
      选择引流链接
    </el-button>
    <div style="margin-bottom: 10px;">
      <div v-for="(item, index) in value" :key="index">
        {{ item.linkName }}

        <el-button @click="value.splice(index, 1)" size="mini" type="text">删除</el-button>
      </div>
    </div>

    <el-dialog title="选择引流链接" :visible.sync="visible" :close-on-click-modal="false" width="800px">
      <NormalForm :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery"
        @handleReset="handleReset" :isShowCard="false"></NormalForm>

      <el-table v-loading="loading" :data="tableList" @select="handleSelectionChange" style="width: 100%"
        height="442px" ref="multipleTable" @select-all="handleSelectAll">
        <el-table-column type="selection" width="55" />
        <el-table-column label="链接名称" align="center" prop="linkName" min-width="180px"
          show-overflow-tooltip></el-table-column>
        <el-table-column label="获客类型" prop="drainageType" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div>{{ drainageOpt[row.drainageType] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createBy" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="浏览数" align="center" prop="browseNum" show-overflow-tooltip />
        <el-table-column label="链接状态" align="center" prop="linkStates" width="100px">
          <template slot-scope="{ row, $index }">
            <div v-if="row.linkStates == 0" style="color: #14D595;">
              启动中
            </div>
          </template>
        </el-table-column>
      </el-table>

      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="ok" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { linkList } from "@/api/communityOperating/drainageLink";
export default {
  name: 'checkDrainageLink',
  props: {
    value: {
      type: Array,
      default() { return [] }
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      visible: false,
      queryForm: {
        linkName: "",
        linkStates: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '链接名称',
          value: '',
          prop: 'linkName',
          type: 'INPUT',
          emunName: '',
          xl: 6,
          lg: 6,
        },
        // {
        //   label: '类型选择',
        //   value: '',
        //   prop: 'drainageType',
        //   type: 'SELECT',
        //   emunName: 'drainageList'
        // },
        {
          label: '状态选择',
          value: '',
          prop: 'linkStates',
          type: 'SELECT',
          emunName: 'linkStatesList',
          xl: 6,
          lg: 6,
        },
      ],
      enumOpt: {
        drainageList: [],
        linkStatesList: [
          {dictValue: '', dictLabel: '全部状态'},
          {dictValue: '0', dictLabel: '开启'},
          {dictValue: '1', dictLabel: '关闭'},
        ],
      },
      loading: false,
      total: 0,
      tableList: [],
      checkedList: [],
      drainageOpt: {},
    }
  },
  methods: {
    open() {
      // 引流类型
      this.getDicts("drainage_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.drainageList = [{dictValue: '', dictLabel: '全部类型'}, ...res.data,];
          console.log(this.enumOpt.drainageList, '3')
          res.data.forEach(item => {
            this.drainageOpt[item.dictValue] = item.dictLabel
          });
        }
      });
      this.handleQuery();
      this.visible = true;
      this.checkedList = JSON.parse(JSON.stringify(this.value))
    },
    ok() {
      this.value.splice(0, this.value.length)
      this.value.push(...this.checkedList);
      this.visible = false;
      this.$emit('change', this.value)
    },
    handleSelectionChange(selection, val) {
      console.log(selection, val);
      // 接收两个参数，selection为所有选中数据的集合，val为当前选择的数据

      // 先将所有选中的数据变为未选中状态
      this.$refs.multipleTable.clearSelection();
      // 如果选择完当前数据后selection为空数组，说明现在是取消勾选，无选中数据
      if (selection.length == 0){
        this.selectedRow = [];  // 清空data中绑定的selectedRow
        return
      };
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(val, true);
      // 更新data中的selectedRow
      this.checkedList =  [{...val}];
    },
    handleSelectAll(){
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item => item.linkId == this.checkedList[0].linkId)[0], true);
    },
    // 重置
    handleReset() {
      this.queryForm = {
        linkName: "",
        drainageType: '',
        linkStates: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      let obj = {
        hkOpenFlag: 0,
        // linkName: this.queryForm.linkName,
        // drainageType: this.queryForm.drainageType,
        // pageNum: this.queryForm.pageNum,
        // pageSize: this.queryForm.pageSize,
        ...this.queryForm,
        drainageType: '3'
      };
      this.loading = true;
      this.checkedList = []
      linkList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.data.rows || [];
          // console.log(this.value, this.tableList);
          this.$nextTick(() => {
            if (this.value.length > 0 && this.tableList.length > 0) {
              this.value.forEach(item => {
                this.tableList.forEach(element => {
                  if (element.linkId == item.linkId) {
                    console.log(element.linkId, item.linkId);
                    this.$refs.multipleTable.toggleRowSelection(element);
                  }
                })
              })
            }
          })
          this.total = res.data.total || 0;
        }
      }).finally(() => this.loading = false);
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
</style>
